<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css" />
    <!--<link rel="stylesheet" href="../../styles/common.css" />-->
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="addBrand-container" id="admin-add-app">
    <div class="container">
        <el-form ref="ruleForm" :model="ruleForm" :inline="false" label-width="180px" class="demo-ruleForm">
            <el-form-item label="账户名:" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入账户名" maxlength="20"/>
            </el-form-item>
            <el-form-item label="金额:" prop="count">
                <el-input v-model="ruleForm.count" placeholder="请输入金额" maxlength="20"/>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="ruleForm.description" placeholder="请输入账户描述" maxlength="20"/>
            </el-form-item>
            <div class="subBox address">
                <el-form-item>
                    <el-button  @click="goBack()">
                        取消
                    </el-button>
                    <el-button type="primary" @click="submitForm('ruleForm', false)">
                        保存
                    </el-button>
                </el-form-item>
            </div>
        </el-form>
        <div>
            <el-button type="info" @click="openzhichu">
                支出表单填写
            </el-button>
        </div>

        <!--账户付款流水编辑表单-->
        <el-dialog title="付款表单" :visible.sync="openzhichuStatus">
            <el-form :model="zhichuForm">
                <el-form-item label="付款账户ID:" :label-width="formLabelWidth">
                    {{zhichuForm.id}}
                </el-form-item>
                <el-form-item label="付款账户:" :label-width="formLabelWidth">
                    {{zhichuForm.name}}
                </el-form-item>
                <el-form-item label="付款金额" :label-width="formLabelWidth">
                    <el-input v-model="zhichuForm.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="付款方式" :label-width="formLabelWidth">
                    <el-input v-model="zhichuForm.payment" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="付款原因" :label-width="formLabelWidth">
                    <el-input v-model="zhichuForm.desctext" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="openzhichuStatus = false">取 消</el-button>
                <el-button type="primary" @click="zhichuFormMoney">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/account.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#admin-add-app',
        data() {
            return {
                id: '',
                openzhichuStatus:false,
                actionType : '',
                ruleForm : {
                    name:'',
                    count:'0',
                    description:''
                },
                zhichuForm:{
                    id:"",
                    name:"",
                    count:"",
                    desctext:"工资支出",
                    payment:"微信"
                }
            }
        },

        created() {
            /*获取参数id*/
            this.id = requestUrlParam('id');//从网址上解析参数
            /*判断参数是id还是add  -》如果是id调用edit   否则调用add*/
            this.actionType = this.id ? 'edit' : 'add';
            if (this.id) {
                this.init()
            }
        },
        mounted() {
        },
        methods: {
            async init () {
                //发起一个异步请求，获取用户信息
                queryAccountById(this.id).then(res => {
                    // console.log(res);
                    if (String(res.code) === '1') {
                        // console.log(res.data);
                        this.ruleForm = res.data;
                        // this.ruleForm.password = ''
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            submitForm (formName, st) {
                var _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.actionType === 'add') {
                            //params = 数据
                            const params = {
                                ...this.ruleForm,
                            };
                            /*找到发送请求的方法*/
                            addAccount(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('员工添加成功！');
                                    if (!st) {
                                        this.goBack()
                                    } else {
                                        this.ruleForm = {
                                        }
                                    }
                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        } else {
                            const params = {
                                ...this.ruleForm,
                            };
                            editAccount(params).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('账户信息修改成功！');
                                    setTimeout(function (){
                                        _this.goBack()
                                    },1000);

                                } else {
                                    this.$message.error(res.msg || '操作失败')
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err)
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })
            },
            openzhichu(){
                this.openzhichuStatus = true
                this.zhichuForm.name = this.ruleForm.name
                this.zhichuForm.id = this.ruleForm.id
            },
            zhichuFormMoney(){
                var _this = this
                this.$confirm("用"+this.zhichuForm.name+"账户支出"
                    +this.zhichuForm.count+"元,完成"+this.zhichuForm.desctext+'事件，确认支出?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {//点击确定执行
                    zhichuCount(this.zhichuForm).then(res => {//请求结果处理
                        if (String(res.code) === '1') {
                            _this.openzhichuStatus = false
                            this.ruleForm = res.data
                            this.$message.success("用"+this.zhichuForm.name+"账户支出"
                                +this.zhichuForm.count+"元,完成"
                                +this.zhichuForm.desctext+'事件，扣款成功,剩余：'
                                +res.data.count);
                        }else{
                            this.$message.error(res.msg)
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            goBack(){
                window.parent.menuHandle({
                    id: '5',
                    url: '/back/page/account/list.html',
                    name: '账户管理'
                },false)
            }
        }
    })
</script>
</body>
</html>